<template>
<el-tabs v-model="activeName"  @tab-change="handleClick">
    <template v-for="item in warehouseData" :key="item">
        <el-tab-pane :label="item.name" :name="item.id"></el-tab-pane>
    </template>
  </el-tabs>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item>
             <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
        </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form :model="formData3"  >
    <el-form-item label="名称" >
        <el-input v-model="formData3.name" />
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="addShelf()">添加</el-button>
      </el-form-item>
  </el-form>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="id" label="编号" width="60" />
<el-table-column fixed prop="name" label="名称" width="120" />
<el-table-column prop="brief" label="备注" width="200" show-overflow-tooltip />
<el-table-column fixed prop="seq" label="排序" width="120" />
<el-table-column prop="statusX" label="状态" width="120" >
    <template #default="scope">
        <el-tag  :type="statueType(scope.row.status)">{{scope.row.statusX}}</el-tag>
    </template>
</el-table-column>
<el-table-column prop="lastUpdateBy" label="更新人" width="120" :formatter="formatter"/>
<el-table-column prop="lastUpdateTime" label="更新时间" width="160" :formatter="formatter"/>

<el-table-column fixed="right" label="操作" min-width="200">
    <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
    </template>
</el-table-column>
</el-table>
<el-drawer v-model="drawer" title="修改货架">
        <el-form :model="formData2" ref="form1Ref">
            <el-form-item label="名称">
                <el-input v-model="formData2.name" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="formData2.brief" />
            </el-form-item>
            <el-form-item label="状态">
                <el-input v-model="formData2.status" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="formData2.seq" :min="1" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">修改</el-button>

            </el-form-item>
        </el-form>
    </el-drawer>
</template>
<script setup lang="ts">
import { shelfApi, warehouseApi } from '@/api';
import { dayjs } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
const form1Ref = ref()
const tableData = ref([])
const activeName = ref('')
const warehouseData = ref<any>([])
const drawer = ref(false)
const formData3 = reactive({
    name:'',
    warehouseId:''
})
const statueType = (status:number) => {
    switch (status) {
        case 1:
            return 'success'
        case 120:
            return 'danger'
    }   
}
const addShelf = () => {
    formData3.warehouseId=activeName.value
    shelfApi.add.call(formData3).then(res=>{
        callShelfApi()
    })
}
const formData2 = reactive({
    id:'',
    name:'',
    brief:'',
    status:0,
    seq:1
})
const submitForm = () => {
    shelfApi.update.call(formData2).then(res=>{
        drawer.value=false
        callShelfApi()
    })
}
const edit = (row:any) => {
    console.log(row)
    drawer.value=true
    formData2.id=row.id
    formData2.name=row.name
    formData2.brief=row.brief
    formData2.status=row.status
    formData2.seq=row.seq
}
const formData = reactive({
    name:'',
    activeName:''
})
const onSubmit = () => {
    callShelfApi()
}
const handleClick = (tab:any, event:any) => {
    
  callShelfApi()
}
const callWarehouseApi = () => {
    warehouseApi.select.call().then(res=>{
        warehouseData.value=res
        activeName.value=res[0].id
        callShelfApi()
    })
}
const callShelfApi = () => {
    let name = formData.name == "" ? undefined : formData.name
    shelfApi.select.call({warehouseId:activeName.value,name}).then(res=>{
        tableData.value=res
    })
    
}

onMounted(()=>{
    callWarehouseApi()
})
const formatter = (row: any, column: any, cellValue: any, index: number) => {

if (column.property === 'lastUpdateTime') {
    return dayjs(cellValue).format('YY年MM月DD HH:mm')
} else if (column.property === 'lastUpdateBy') {
    return cellValue + " 同志"
}

return cellValue
}
</script>
<style>


</style>